<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>闹钟</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <script src="../common/cdn/lunar.js"></script>
    <style>
      .view {
        width: 100%;
        height: 100%;
        /* margin: 20px; */
        background-color: rgba(0, 0, 0, 1);
        position: relative;
        color: #fff;
      }

      .circle-box{
        width: 100%;
        height: 100%;
        position: relative;
      }


      .circle-item {
        position: absolute;
        display: inline-block;
        width: 12vw; /* 24px */
        height: 8vw; /* 16px */
        text-align: center;
      }


      .circle-item:empty::before{
        content: '';
        width: 4.5vw; /* 9px */
        height: 4.5vw; /* 9px */
        border-radius: 50%;
        background-color: rgba(221, 221, 221, 0.5);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      .pointer-box{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }


      .pointer-conter{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 6vw; /* 12px */
        height: 6vw; /* 12px */
        border: 1vw solid #fff;
        border-radius: 50%;
      }

      .pointer-item{
        background-color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: calc(50% + 2.5vw);
        transform-origin: center calc(100% + 2.5vw);
      }


      .pointer-hour{
        width: 2vw; /* 4px */
        height: 17.5vw; /* 35px */ 
        border-radius: 1vw 1vw 0 0;
        /* transform: rotate(150deg); */
      }

      .pointer-minute{
        width: 1vw; /* 2px */
        height: 30vw; /* 60px */
        border-radius: 1px 1px 0 0;
      }

      .pointer-second{
        width: 1vw; /* 2px */
        height: 32.5vw; /* 65px */
        background-color: #c05f65;
        border-radius: 0.5vw 0.5vw 0 0;
      }


    </style>
  </head>
  <body>
    <div class="view">
      <div class="circle-box">
        <div class="circle-item">3</div>
        <div class="circle-item"></div>
        <div class="circle-item"></div>
        <div class="circle-item">6</div>
        <div class="circle-item"></div>
        <div class="circle-item"></div>
        <div class="circle-item">9</div>
        <div class="circle-item"></div>
        <div class="circle-item"></div>
        <div class="circle-item">12</div>
        <div class="circle-item"></div>
        <div class="circle-item"></div>
      </div>
      <div class="pointer-box">
        <div class="pointer-hour pointer-item"></div>
        <div class="pointer-minute pointer-item"></div>
        <div class="pointer-second pointer-item"></div>
        <div class="pointer-conter"></div>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/popup.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import { removeBaseImg } from '../common/utils/storage_imp.js'
    window.removeBaseImg = removeBaseImg;
    let data = {
      list: '',
      transparent: 100,
    };
    let currentState = false;
    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res) => {
        // 兼容1.04前版
        if(Array.isArray(res)){
          let list = res.map(item=>{
            return {
              ...item,
              urls: [],
              type: 'once'
            }
          })
          data = {
            list: list,
            transparent: 100,
          }
        }else{
          data = res || data;
        }

        container.style.backgroundColor = `rgba(0, 0, 0, ${data.transparent / 100})`;
        window.sendSaveData(data);
      });
      window.ipcRenderer.on('toParent', (event, res) => {
        data = {
          list: res.data,
          transparent: res.transparent,
        }
        container.style.backgroundColor = `rgba(0, 0, 0, ${data.transparent / 100})`
        window.sendSaveData(data);
      });
    }

    // console.log(HolidayUtil.getHoliday(2024, 5, 12));


    const container = document.querySelector('.view');
    const items = document.querySelectorAll('.circle-item');
    const pointerHourEl = document.querySelector('.pointer-hour');
    const pointerMinuteEl = document.querySelector('.pointer-minute');
    const pointerSecondEl = document.querySelector('.pointer-second');

    const render = () => {
      const itemCount = items.length;
      const centerX = container.offsetWidth / 2;
      const centerY = container.offsetHeight / 2;
      const radius = Math.min(centerX, centerY) * 0.8;


      
      for (let i = 0; i < itemCount; i++) {
        const angle = (360 / itemCount) * i * Math.PI / 180; // 转换角度为弧度
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);

        items[i].style.top = `calc(${y}px - 6vw)`;
        items[i].style.left = `calc(${x}px - 6vw)`;

      }
    }

    const filterDate = () => {
      if(data.list === '')return [];
      return data.list.map((item,index)=>{
        return {
          ...item,
          index
        }
      }).filter(item=>{
        return item.switch;
      })
    }

    const filterState = () => {
      if(data.list === '')return [];
      return data.list.map((item,index)=>{
        return {
          ...item,
          index
        }
      }).filter(item=>{
        return item.state;
      })
    }


    const removeduplicates = () => {
      let arr = filterDate();
      for(let i = 0; i < arr.length; i++){
        for(let j = i + 1; j < arr.length; j++){
          if(arr[i].hour === arr[j].hour && arr[i].minute === arr[j].minute && arr[i].type === arr[j].type){
            arr.splice(j, 1);
            j--;
          }
        }
      }

      return arr;
    }

    const typeIdentify = (item) => {
      let type = item.type;
      switch(type){
        case 'once':
          data.list[item.index].switch = false;
          data.list[item.index].state = false;
          
          window.sendSaveData(data);
          return true;
        case 'day':
          data.list[item.index].switch = false;
          data.list[item.index].state = true;
          window.sendSaveData(data);
          return true;
        case '[1,2,3,4,5]':
          if(/[1-5]/.test(item.week)){
            data.list[item.index].switch = false;
            data.list[item.index].state = true;
            window.sendSaveData(data);
            return true;
          }else{
            return false;
          }
        case 'law':
          let d = HolidayUtil.getHoliday(item.year, item.month, item.date);
          if(d){
            let work = d.isWork();
            if(work){
              data.list[item.index].switch = false;
              data.list[item.index].state = true;
              window.sendSaveData(data);
              return true;
            }else{
              return false;
            }
          }else{
            if(/[1-5]/.test(item.week)){
              data.list[item.index].switch = false;
              data.list[item.index].state = true;
              window.sendSaveData(data);
              return true;
            }else{
              return false;
            }
          }

        default:
          let weeks = [...new Set(item.type.split(''))];
          for(let i = 0; i < weeks.length; i++){
            let week = weeks[i];
            if(week == item.week){
              data.list[item.index].switch = false;
              data.list[item.index].state = true;
              window.sendSaveData(data);
              return true;
            }else if(week == 7 && item.week == 0 ){
              data.list[item.index].switch = false;
              data.list[item.index].state = true;
              window.sendSaveData(data);
              return true;
            }else{
              continue;
            }
          }

          return false
      }

    }


    const draw = async () => {
      let now = new Date();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      let week = now.getDay();
      let year = now.getFullYear(); 
      let month = now.getMonth() + 1;
      let date =  now.getDate();


      let arr = filterDate()

      pointerHourEl.style.transform = `rotate(${hour * 30 + minute / 2}deg)`;
      pointerMinuteEl.style.transform = `rotate(${minute * 6}deg)`;
      pointerSecondEl.style.transform = `rotate(${second * 6}deg)`;
      for(let i = 0; i < arr.length; i++){
        let item = arr[i];
        if(item.hour === hour && item.minute === minute){
          let bool = typeIdentify({
            ...item,
            week,
            year,
            month,
            date
          })
          if(!bool)return;
          window?.openPopup({
            remark: item.remark,
            sound: item.sound,
            fullScreen: item.fullScreen,
            randomImg: item.randomImg,
            urls: item.urls
          })
        }
      }

      filterState().forEach((item,index)=>{
        if(item.hour !== hour || item.minute !== minute){
          data.list[item.index].state = false;
          data.list[item.index].switch = true;
        }
      })
      
    }

    setInterval(draw, 16)
    render();
    window.onresize = render;

    window.getData = ()=>data;
 
  </script>
</html>
